<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <div
        id="chartSum"
        style="
          display: inline-block;
          margin-left: 50px;
          margin-top: 30px;
          font-weight: bold;
          font-size: 22px;
          color: #ffb02a;
          border: 1px lightgrey solid;
          border-radius: 10px;
          padding: 20px;
        "
      >
        总计：￥{{ formatTotal(total) }}
      </div>
      <!-- 柱状图 -->
      <el-tab-pane label="各类收入柱状图" name="bar">
        <div
          id="bar"
          style="width: 1200px; height: 500px; margin: auto auto"
        ></div>
      </el-tab-pane>
      <!-- 饼图 -->
      <el-tab-pane label="各类收入饼图" name="pie">
        <div
          id="pie"
          style="width: 600px; height: 600px; margin: 10px auto"
        ></div>
      </el-tab-pane>
      <!-- 本周收入折线图 -->
      <el-tab-pane label="本周收入" name="line1">
        <div
          id="weekLine"
          style="width: 900px; height: 500px; margin: 10px auto"
        ></div>
      </el-tab-pane>
      <!-- 本月收入折线图 -->
      <el-tab-pane label="本月收入" name="line2">
        <div
          id="monthLine"
          style="width: 1500px; height: 500px; margin: 10px auto"
        ></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";

const store = useStore();

// Reactive data
const activeName = ref<string>("bar");
const total = ref<number>(0);
const totalAll = ref<number>(0);
const totalWeek = ref<number>(0);
const totalMonth = ref<number>(0);

// Methods
const handleClick = (tab: any) => {
  switch (tab.name) {
    case "bar":
      total.value = totalAll.value;
      break;
    case "pie":
      total.value = totalAll.value;
      break;
    case "line1":
      total.value = totalWeek.value;
      break;
    case "line2":
      total.value = totalMonth.value;
      break;
  }
};

const formatTotal = (value: number) => {
  return Number(value.toFixed(2));
};

// Initialize charts
const initCharts = () => {
  const barChart = echarts.init(document.getElementById("bar"));
  const pieChart = echarts.init(document.getElementById("pie"));
  const lineChart1 = echarts.init(document.getElementById("weekLine"));
  const lineChart2 = echarts.init(document.getElementById("monthLine"));

  const barOption = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "收入统计柱状图",
      x: "center",
    },
    label: {
      show: true,
      position: "top",
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "bar",
      },
    ],
  };

  const pieOption = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "收入统计饼图",
      x: "center",
    },
    series: [
      {
        type: "pie",
        data: [],
      },
    ],
  };

  const lineOption1 = {
    tooltip: {
      trigger: "item",
    },
    label: {
      show: true,
    },
    title: {
      text: "本周收入",
      x: "center",
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "line",
      },
    ],
  };

  const lineOption2 = {
    tooltip: {
      trigger: "item",
    },
    label: {
      show: true,
    },
    title: {
      text: "本月收入",
      x: "center",
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "line",
      },
    ],
  };

  // Load income chart data
  store.state.request.get("/api/income/chart").then((res: any) => {
    if (res.code === "200") {
      const categoryIncomes = res.data.categoryIncomes;
      const categoryNames = categoryIncomes.map(
        (item: any) => item.categoryName
      );
      const incomes = categoryIncomes.map((item: any) => item.categoryIncome);

      barOption.xAxis.data = categoryNames;
      barOption.series[0].data = incomes;
      barChart.setOption(barOption);

      pieOption.series[0].data = categoryNames.map(
        (name: string, index: number) => ({
          value: incomes[index],
          name: name,
        })
      );
      pieChart.setOption(pieOption);

      total.value = incomes.reduce(
        (sum: number, item: number) => sum + item,
        0
      );
      totalAll.value = total.value;
    }
  });

  // Load weekly income data
  store.state.request.get("/api/income/week").then((res: any) => {
    if (res.code === "200") {
      lineOption1.series[0].data = res.data.weekIncome;
      lineChart1.setOption(lineOption1);
      totalWeek.value = res.data.weekIncome.reduce(
        (sum: number, item: number) => sum + item,
        0
      );
    }
  });

  // Load monthly income data
  store.state.request.get("/api/income/month").then((res: any) => {
    if (res.code === "200") {
      lineOption2.xAxis.data = res.data.monthDays;
      lineOption2.series[0].data = res.data.monthIncome;
      lineChart2.setOption(lineOption2);
      totalMonth.value = res.data.monthIncome.reduce(
        (sum: number, item: number) => sum + item,
        0
      );
    }
  });
};

// Lifecycle
onMounted(() => {
  initCharts();
});
</script>

<style scoped></style>
